<template>
	<view>
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">分类商品</block>
		</cu-custom>
		
		<!-- 首页商品展示区域-->
		<view class="grid col-2 margin-top-sm">
			<view class="padding-xs" v-for="(item ,index)  in  products" v-bind:key="index">
				<view class="padding radius text-center shadow-blur bg-white">
					<view>
						<navigator open-type="navigate"  :url="'../detail/detail?id='+item.spuId">
							<image v-bind:src="imageSrc+item.image" mode="aspectFit"></image>
						</navigator>
					</view>
					<view class="text-lg">{{item.name}}</view>
					<view class="margin-top-sm text-Abc">
						<text class="text-price"> {{item.price}}</text>
					</view>
				</view>
			</view>
		</view>
		
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params:{
					pageNum:1,
					pageSize:10,
					query:'',
					cateId:'',
					brandId:''
					
				},
				products:[],
				imageSrc:this.$global.imageSrc
				
			}
		},
		onLoad(params){
			//获取类别Id
			var id = params.id;
			this.params.cateId = id; 
			//查询本类商品
			this.init() 
		
		},
		onReachBottom() {
			//当页面接触到底部的时候触发的方法 
			uni.showToast({
				title: '正在拉取数据',
				duration: 1000
		
			})
			this.params.pageNum++;
			this.init()
		
		},
		
		methods: {
			init:function(){
				this.$api.__api__sku_page(this.params).then((res) =>{
			
					let list = res.data.list;
					if(list.length>0){
						for (let i = 0; i < list.length; i++) {
							this.products.push(list[i])
						}
						
					}else{
						uni.showToast({
							title:'已经没有数据了',
							duration:3000
						})
					}
					
					
					
					
				});
			}
			
		}
	}
</script>

<style>

</style>
